<template>
    <el-container>
        <el-header class="header-search">
            <search-header
                :search-form="searchForm"
                :search-items="searchItems"
                :expand="expand"
                :fc-table-ref="fcTableRef"
                @expand="expand = $event"
            />
        </el-header>
        <el-main class="nopadding">
            <fc-table ref="fcTableRef" :indent="20" :requestApi="getLoggerListApi" :columns="columns">
                <template #realname="scope">
                    <div>{{ scope.row.user?.realname ?? '---' }}</div>
                </template>
                <template #options="scope">
                    <el-button type="primary" icon="View" v-auth="'logger.detail'" link @click="detailClick(scope.row)">
                        详情
                    </el-button>
                </template>
            </fc-table>
        </el-main>
        <el-drawer v-model="formViewVisible" :size="600" :with-header="false" destroy-on-close>
            <form-view v-model="formViewVisible" :loggerID="selectLoggerID"></form-view>
        </el-drawer>
    </el-container>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, computed} from "vue";
import {ColumnProps, FcTableInstance} from "@/components/fcTable/model"
import {getLoggerFilterApi, getLoggerListApi} from "@/api/modules/setting.ts";
import {FilterModel} from "@/models/filterModel.ts";
import {LoggerModel} from "@/models/settingModel.ts";
import SearchInput from '@/components/lcSearch/input.vue'
import SearchSelect from '@/components/lcSearch/select.vue'
import SearchDateRange from '@/components/lcSearch/dateRange.vue'
import SearchHeader from '@/components/lcSearch/header.vue'
import FormView from "./components/form.vue"

const fcTableRef = ref<FcTableInstance | null>(null);
const expand = ref(false);

const filter = reactive<FilterModel>({
    type: [],
});
const loadFilters = async () => {
    const filterData = await getLoggerFilterApi();
    filter.type = Object.entries(filterData.data.data.type || {}).map(
        ([key, label]) => ({key, label})
    );
};
// 搜索表单
const searchForm = reactive<Record<string, any>>({
    model: null,
    type: null,
    created_at: null,
})
// 搜索参数
const searchItems = computed(() => [
    {component: SearchInput, model: 'realname', props: {label: '操作人', placeholder: '请输入操作人'}},
    {component: SearchInput, model: 'model', props: {label: '数据模型', placeholder: '请输入数据模型'}},
    {
        component: SearchSelect,
        model: 'type',
        props: {label: '事件类型', placeholder: '请选择事件类型', options: filter.type}
    },
    {component: SearchDateRange, model: 'created_at', props: {label: '操作时间'}},
]);
// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
    {prop: "id", label: "序号", width: 80},
    {prop: "realname", label: "操作人"},
    {prop: "ip", label: "IP"},
    {prop: "type", label: "事件类型"},
    {prop: "model", label: "数据模型"},
    {prop: "created_at", label: "操作时间", width: 200},
    {prop: "options", label: "操作", width: 180, fixed: "right"},
]);
const selectLoggerID = ref(0);
const formViewVisible = ref(false);
// 操作日志详情
const detailClick = (row: LoggerModel) => {
    selectLoggerID.value = row.id;
    formViewVisible.value = true;
}
onMounted(() => {
    loadFilters();
});
</script>
<style lang="scss" scoped>
.ellipsis-cell {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
